<template>
  <div class="register">
    <div class="register_box">
      <!-- 标题 -->
      <h1><i class="el-icon-arrow-left" @click="backlogin"></i>欢迎来到注册界面</h1>
      <!-- 选择盒子 -->
      <div class="choose_box">
        <span class="user">用户</span>
        <input
          type="checkbox"
          name=""
          id="user"
          :checked="ischecked1"
          @click="checked1"
        />
        <span class="administrator">管理员</span>
        <input
          type="checkbox"
          name=""
          id=""
          :checked="ischecked2"
          @click="checked2"
        />
      </div>
      <!-- 输入框 -->
      <el-form
        ref="formRef"
        :model="form"
        :rules="loginrules"
        label-width="80px"
      >
        <!-- 用户名 -->
        <el-form-item
          label="用户名"
          prop="user_name"
          class="input"
        >
          <el-input v-model="form.user_name"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码"  prop="user_password"  class="input">
          <el-input
            v-model="form.user_password"
            type="password"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="确认密码">
          <el-input v-model="form.user_password"></el-input>
        </el-form-item> -->
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="regs">注册</el-button>
          <el-button type="info" @click="resetresgister">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 注册按钮 -->

    </div>
  </div>
</template>

<script>
export default {
  // 数据源
  data() {
    return {
      // 这是用户和管理的选择框
      ischecked1: false,
      ischecked2: false,
      // 输入表单中的数据
      form: {
        user_name: '',
        user_password: ''
      },
      // 表单验证区域
      loginrules: {
        user_name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' }
        ],
         user_password:[
             { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
          ],
      }
    }
  },

  // 方法区域
  methods: {
    // 点击返回登录界面
    backlogin(){
      this.$router.push('/');
    },

    // 用户点击注册模块
    checked1() {
      this.ischecked1 = true
      if (this.ischecked2 === true) {
        this.ischecked2 = false
      }
    },
    // 管理点击注册模块
    checked2() {
      this.ischecked2 = true
      if (this.ischecked1 === true) {
        this.ischecked1 = false
      }
    },
    // 点击重置
    resetresgister(){
      this.$refs.formRef.resetFields()
      this.user_name='';
      this.user_password='';
    },
    // 点击注册预校验
    regs(){
     if(this.ischecked1==true){
         this.$refs.formRef.validate(async(valid)=>{
        if(!valid) return;
        // 发送ajax请求
       const {data:res}=await this.$http.post('user/register',this.form);
      //  console.log(res);
      if(res.status==2) return this.$message.warning('该用户名被占用');
      if(res.status==0) return this.$message.success('注册成功');
      
      })
     }else if(this.ischecked2==true){
      //  console.log('注册管理员');
       this.$refs.formRef.validate(async(valid)=>{
        if(!valid) return;
        // 发送ajax请求
       const {data:res}=await this.$http.post('admin/register',this.form);
      //  console.log(res);
      if(res.status==2) return this.$message.warning('该管理员名被占用');
      if(res.status==0) return this.$message.success('管理员注册成功');
      
      })
     }else{
       alert('请选择注册身份')
     }
    },


  }
}
</script>

<style lang="less" scoped>
// 注册盒子的样式
.register_box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  height: 400px;
  width: 600px;
  // 标题文字样式
  h1 {
    text-align: center;
    color: white;
    .el-icon-arrow-left {
      float: left;
      margin-left: 10px;
    }
    .el-icon-arrow-left:hover {
      transform: scale(1.1);
    }
  }

  .choose_box {
    text-align: center;
    padding-bottom: 25px;
    // 用户的样式
    .user {
      color: white;
    }

    #user {
      margin-right: 50px;
    }
    // 管理员样式
    .administrator {
      color: white;
    }
  }
  //  按钮样式
  .btns {
    margin-right: 50px;
    text-align: center;
  }

  // 输入样式
  .input {
    text-align: center;
    color: white;
    width: 550px;
  }

  /deep/ .el-form-item__label{
    color: white;
  }
}
</style>
